<h1>
	CompositeElement元素
</h1>

<div id="composite-element" class="sect">
	<h2>
		什么是CompositeElement？
	</h2>
	<p>
		CompositeElement能够把一组元素视作一个元素来处理（依据
		<a href="http://en.wikipedia.org/wiki/Composite_pattern">维基百科全书</A>），这组元素的数量可以零个到多个。CompositeElement采用与Ext.Element相同的接口，以简化程序员的工作，也可以减少处理集合上的那些一般内核检查（指要写“循环”的代码）。通常CompositeElement由执行静态方法
		<a
			href="http://extjs.com/deploy/dev/docs/?class=Ext&amp;member=select">Ext.select</A>来获取得到。Ext.select()基于DomQuery来搜索整个文档，匹配符合特定选择符（Selecetor）的元素。
	</p>
	<p>
		例如下列的装饰元素：
	</p>
	<pre>&lt;html&gt;
   &lt;body&gt;
      &lt;div id=<span class=string>"first"</SPAN> class=<span
			class=string>"title"</SPAN>&gt;Sample A&lt;/div&gt;
      &lt;div id=<span class=string>"second"</SPAN> class=<span
			class=string>"doesNotMatch"</SPAN>&gt;Lorem Ipsum&lt;/div&gt;

      &lt;div id=<span class=string>"third"</SPAN> class=<span
			class=string>"title secondCSSCls"</SPAN>&gt;Some additional content&lt;/div&gt;
   &lt;/body&gt;
&lt;/html&gt;</PRE>

	<p>
		我们根据选择符“.title”查询整张页面得到一个CompositeElement类型的对象，其包含了两个div的引用，分别是第一个div和第二个div。
	</P>
	<pre>var els = Ext.select('.title');
</PRE>
	<p>
		注意：第三个元素同时还附有secondCSSCls的样式。HtmlElement元素可允许有多个CSS样式类，就用空格分割开。这里的选择符不是说只要title样式的，那么“first”与“thrid”都能返回得到。
	</P>
	<p>
		获取CompositeElement对象后即可像单个元素那段操作一群Elements。例如，我们对集合中的每个元素加入CSS的.error样式。
	</P>
	<pre>
var els = Ext.select(<span class="string">'.title'</span>);
els.addClass(<span class="string">'error'</span>);</pre>

	<p>
		如果要获取的某一些元素是处于另处一元素的附近的，这两者之间相对的关系是已知的，那么就可以从那个元素为起点进行搜索查询。这样查询效率会更来得快，原因是你是在文档中的某一部分内局部地查询，自然比全体查询的快。下面HTML中，“accordion”的div标签是包含着first、second
		和third元素：
	</p>
	<pre>
&lt;html&gt;
   &lt;body&gt;
      &lt;div id=<span class="string">"accordion"</span>&gt;
         &lt;div id=<span class="string">"first"</span> class=<span
			class="string">"title"</span>&gt;Sample A&lt;/div&gt;
         &lt;div id=<span class="string">"second"</span> class=<span
			class="string">"doesNotMatch"</span>&gt;Lorem Ipsum&lt;/div&gt;
         &lt;div id=<span class="string">"third"</span> class=<span
			class="string">"title secondCSSCls"</span>&gt;
            Some additional content
         &lt;/div&gt;
      &lt;/div&gt;
   &lt;/body&gt;
&lt;/html&gt;</pre>

	<p>
		由于我们得知这三元素都在accordion元素里面的，因此我们将搜索范围仅限定在accordion元素内。
	</p>
	<pre>
var accordion = Ext.get(<span class="string">'accordion'</span>);
accordion.select(<span class="string">'title'</span>);</pre>
	<p>
		如果清楚元素的相对位置，应该尽量使用这种缩小范围的方式来查询，以利于性能提升。
	</p>
	<p>
		其它有用的CompositeElement方法如下面代码所列：
	</p>
	<pre>
var accordion = Ext.get(<span class="string">'accordion'</span>);
accordion.select(<span class="string">'title'</span>);
<span class="comment">//firstItem是第一个的div，类型是Ext.Element</span>
var firstItem = accordion.item(0);
 <span class="comment">//  提示1或居二的位置</span>
alert(accordion.indexOf(<span class="string">'third'</span>));
<span class="comment">//提示2</span>
alert(accordion.getCount()); 
<span class="comment">// 集合里和DOM里面都没有这个元素了</span>
accordion.removeElement(<span class="string">'one'</span>, <span
			class="keyword">true</span>); </pre>


	<p class="excluded">
		<strong>Note:</strong> Ext JS用户所熟悉的一些方法，如each、first、last、fill、contains、filter这些都在CompositeElement里都没有。
	</p>
</div>

